<template>
  <div class="daily-and-hourly" v-if="!hLoading&&!dLoading">
    <switch-tab text="7天天气" :checked="checkedIndex===0" :handle="()=>tabHandle(0)" />
    <switch-tab text="24h天气" :checked="checkedIndex===1" :handle="()=>tabHandle(1)" />
    <div
      class="list-container"
      :class="{'active':checkedIndex===0}"
    >
      <daily-item
        v-for="(o,i) in daily"
        :key="i"
        :data="o"
      />
    </div>
    <div
      class="list-container"
      :class="{'active':checkedIndex===1}"
    >
      <hourly-item
        v-for="(o,i) in hourly"
        :key="i"
        :data="o"
      />
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { SwitchTab, HourlyItem, DailyItem } from '@/components'

const { mapState, mapActions } = createNamespacedHelpers('Home')
export default {
  name: 'daily-and-hourly',
  components: { SwitchTab, HourlyItem, DailyItem },
  data: () => ({
    checkedIndex: 0
  }),
  computed: {
    ...mapState({
      hLoading: state => state.weatherHourlyLoading,
      hourly: state => state.weatherHourly.hourly,
      dLoading: state => state.weatherDailyLoading,
      daily: state => state.weatherDaily.daily
    })
  },
  methods: {
    ...mapActions(['getWeatherHourly', 'getWeatherDaily']),
    tabHandle(index) {
      this.checkedIndex = index
    }
  },
  mounted() {
    this.getWeatherHourly()
    this.getWeatherDaily()
  }
}
</script>

<style lang="stylus">
.daily-and-hourly {
  .list-container {
    overflow-x: scroll;
    white-space: nowrap;
    padding: 16px 0;
    display: none;

    &.active {
      display: block;
    }
  }
}
</style>
